
<template>
	<view>
		<scroll-view scroll-y class="page">
			<view class="m-scroll-wrapper">
				<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true"
					:circular="true" :autoplay="true" interval="5000" duration="500">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
						<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false"
							objectFit="cover" v-if="item.type=='video'"></video>
					</swiper-item>
				</swiper>
				
				<view class="cu-bar bg-white">
					<view class="action title-style-3" @click="courseClick">
						<text class="text-xl text-bold">今日课程</text>
						<text class="text-Abc text-gray self-end  text-right text-today">第九周 4月30日</text>
					</view>
				</view>
				<view class="bg-white">
					<view class="grid text-center col-3">
						<view class="service" v-for="(item,indexs) in serviceList" :key="indexs" @click="gradeClick">
							<view class="p-xs mb-sm padding">
								<image class="service-icon" :src="item.icon"></image>
								<view>{{item.text}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				}, {
					id: 3,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
				}, {
					id: 4,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
				}, {
					id: 5,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
				}, {
					id: 6,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
				}],
				dotStyle: true,
				towerStart: 0,
				direction: '',
				serviceList: [{
						icon: '/static/home/11.png',
						text: '成绩查询'
					},
					{
						icon: '/static/home/12.png',
						text: '一卡通查询'
					},
					{
						icon: '/static/home/13.png',
						text: '空教室查询'
					},
					{
						icon: '/static/home/21.png',
						text: '图书查询'
					},
					{
						icon: '/static/home/22.png',
						text: '西大校历'
					},
					{
						icon: '/static/home/23.png',
						text: '校车路线'
					},
					{
						icon: '/static/home/31.png',
						text: '快递点分布'
					},
					{
						icon: '/static/home/32.png',
						text: '校园通讯录'
					},
					{
						icon: '/static/home/33.png',
						text: '水电费缴纳'
					},
				]
			}
		},
		methods: {
			gradeClick: function(){
				uni.navigateTo({
					url: '/pages/school/grade',
					success: (res) => {
						console.log(res);
					},
					fail: (res) => {
						console.log(res);
					}
				})
			},
			courseClick: function(){
				uni.navigateTo({
					url: '/pages/school/course',
					success: (res) => {
						console.log(res);
					},
					fail: (res) => {
						console.log(res);
					}
				})
			}
			
		}
	}
</script>

<style>
	.text-today {
		position: absolute;
		right: 10px;
	}

	.service {
		margin: 0 !important;
		border-radius: 0 !important;
		width: calc((100% - 0px)/3) !important;
		border: 0.01px solid #eee;
	}
	.m-scroll-wrapper{
		padding-bottom: 90rpx;
	}
	.service-icon{
		width: 72px;
		height: 72px;
	}
</style>
